<html>
    <head>
        <title>props</title>
    </head>
    <body>
        <script>
            // porps

                    // 一、如何定义props
                    /*
                        props 可以是数组或对象，用于接收来自父组件的数据。

                        props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。


                                定义一个属性包含以下选项：
                                
                                
                                        选项                 类型                                                                  说明

                                        type:              String、Number、Boolean、Array、Object、Date、Function、Symbol           会检查一个 prop 是否是给定的类型，否则抛出警告
                                                        可以是任何自定义构造函数、或上述内容组成的数组。

                                        default:           any                                                                     为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。
                                                                                                                                对象或数组的默认值必须从一个工厂函数返回。

                                        required           Boolean                                                                 定义该 prop 是否是必填项

                                        validator          Function                                                                自定义验证函数会将该 prop 的值作为唯一的参数代入。
                                                                                                                           在非生产环境下，如果该函数返回一个 false 的值 (也就是验证失败)，一个控制台警告将会被抛出


                                eg:

                                        <template>
                                            <view>
                                                -- 我是子组件componentA --
                                                <view>{{age}}</view>
                                            </view>
                                        </template>
                                        <script>
                                            export default {
                                                props: {
                                                    // 检测类型 + 其他验证
                                                    age: {
                                                        type: Number, 
                                                        default: 0,
                                                        required: true,
                                                        validator: function(value) {
                                                            return value >= 0
                                                        }
                                                    }
                                                }
                                            }
                                        <//script>


                                        // 使用上面定义的组件
                                        <template>
                                            <view>
                                                -- 我是父组件 --
                                                <componentA :age="10"></componentA>
                                            </view>
                                        </template>
                    */

                    

                    /*
                        二、传递静态或动态 props

                               1、可以像这样给 prop 传入一个静态的值：
                               
                                        	<blog-post title="My journey with Vue"></blog-post>

                               2、可以通过 v-bind 动态赋值
                                        
                                            -- 动态赋予一个变量的值 --
                                            <blog-post v-bind:title="post.title"></blog-post>
                                            
                                            <!-- 包含该 prop 没有值的情况在内，都意味着 `true`。--
                                            <blog-post is-published></blog-post>
                                            
                                            <blog-post v-bind:is-published="post.isPublished"></blog-post>

                               3、
                    */


                    /*
                        三、单向数据流

                                  所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：  

                                                父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

                                                这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

                                        ★、（每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。）


                                    <1>、这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用.

                                            在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值：

                                                    <template>
                                                        <view>
                                                            !-- 我是子组件componentA --
                                                            <view>{{myTitle}}</view>
                                                        </view>
                                                    </template>
                                                    <script>
                                                        export default {
                                                            props: ['title'],
                                                            data() {
                                                                return {
                                                                    myTitle:this.title
                                                                }
                                                            }
                                                        }
                                                    <//script>

                                            // 使用上面定义的组件
                                                    <template>
                                                        <view>
                                                            <!-- 我是父组件 --
                                                            <componentA :title="title"></componentA>
                                                        </view>
                                                    </template>
                                                    <script>
                                                        export default {
                                                            data() {
                                                                return {
                                                                    title:"hello"
                                                                }
                                                            }
                                                        }
                                                    <//script>


                                <2>、如果这个prop是以一种原始值传入的，需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

                                            <template>
                                                <view>
                                                    !-- 我是子组件componentA --
                                                    <view>{{normalizedSize}}</view>
                                                </view>
                                            </template>

                                            <script>
                                                export default {
                                                    props: ['size'],
                                                    computed: {
                                                        normalizedSize: function () {
                                                            return this.size.toLowerCase()
                                                        }
                                                    }
                                                }
                                            </、script>

                                        // 使用上面的组件

                                            <template>
                                                <view>
                                                    !-- 我是父组件 --
                                                    <componentA :size="size"></componentA>
                                                </view>
                                            </template>
                                            <script>
                                                export default {
                                                    data() {
                                                        return {
                                                            size:"M"
                                                        }
                                                    }
                                                }
                                            </、script>
                    */

                    
        </script>
    </body>
</html>